<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <span>1111</span>
        <span>2222</span>
    </ul>
    <script>
        // 事件委托 
        // 1.节约性能 2.动态的绑定事件 
        
        // 常规思维： 给li绑定事件 点击的时候弹出对话框
        // 获取li
        // var lis = document.querySelectorAll("li");
        // // 循环绑定事件
        // for(var i=0;i<lis.length;i++){
        //     lis[i].onclick = function(){
        //         alert(111);
        //     }
        // }

        // 二 事件委托
        // 把li的事件委托给 ul
        var ulEle = document.querySelector("ul");
        ulEle.onclick = function(e){
            // 区分点击的元素是否是li ，如果是li那么就弹出弹框。
            // 目标元素 
            var target = e.target;
            // console.log(target);
            // console.log(target.nodeName);  // 是标签元素的名称，注意是全大写
            // alert(111);
            if(target.nodeName.toLowerCase()==="li"){
                    console.log("点击了li元素");
                    alert("1111");
            }

        } 



    </script>
</body>
</html>